<template>
	<view class="">
		<view class="main-tit">
			<alltitleVue :title="title" :url="url" />
			<view class="item-box">
				<view class="title-item" v-for="(item,index) in itemList" :class="{'isindex':isindex==index}"
					@click="itemClick(item,index)">
					{{item.name}}

				</view>
			</view>
		</view>
		<view class="">
			<view class="box" v-if="isindex==0">
				<scroll-view show-scrollbar="false" scroll-y="true" class="scroll-Y scroll-left" @scrolltoupper="upper"
					@scrolltolower="lower">
					<view class="box-left" v-if="sort.length>0">
						<view class="left" v-for="(item,index) in sort" :key="item,id" @click="department(item,index)">
							<text>{{item.title}}</text>
							<!-- <u-icon size="32" name="arrow-right" color="#808080"></u-icon> -->
							<image :src="right" mode="" class="right-img"></image>
						</view>
					</view>
					<u-empty v-else text="暂无数据" mode="list"></u-empty>
				</scroll-view>
			</view>
			<view class="box" v-else>
				<scroll-view show-scrollbar="false" scroll-y="true" class="scroll-Y scroll-left" @scrolltoupper="upper"
					@scrolltolower="lower">
					<view v-if="itemList.length>0">
						<view class="answer" v-for="(item,index) in Answer" :key="item.questionnaireVo.id">
							<view class="answer-top">
								<image :src="item.questionnaireVo.photoUrl" mode=""></image>
								<text>{{item.questionnaireVo.title}}</text>
							</view>
							<view class="answer-con">
								<text>测试得分：{{item.score }}分</text>
								<text>测试时间：{{item.createTime}}</text>
							</view>
							<view class="answer-bot">
								<view class="" @click="goment(item,index)">
									查看详情
								</view>
								<view class="" @click="department(item, index,'记录')">
									再来一次
								</view>
							</view>

						</view>
					</view>
					<u-empty v-else text="暂无数据" mode="list"></u-empty>
				</scroll-view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		getquestionList,
		getquestionnaireAnswer

	} from '../../service/api.js'
	import config from '../../utils/config';
	export default {
		data() {
			return {
				right: config.topHost + '2025/01/09/ee1bcb20aa0b4ae5a14ad5dce09c3ba6.png',
				isindex: 0,
				title: "中医体质辨识",
				sort: [],
				Answer: [],
				itemList: [{
					name: "问卷类型"
				}, {
					name: "测试记录"
				}]
			}
		},
		onLoad(options) {
			if (options.index) {
				this.isindex = options.index;
			}
			this.getquestion();
			this.getAnswer();
		},
		methods: {
			async getquestion() {

				let res = await getquestionList();
				if (res.code == 200) {
					this.sort = res.rows

				}

			},
			async getAnswer() {
				let res = await getquestionnaireAnswer();
				if (res.code == 200) {
					this.Answer = res.rows;

					this.Answer = this.Answer.map((item) => {
						console.log(JSON.parse(item.answer)[0], "999999999999999999");
						try {
							// Parse the JSON string
							const parsedAnswer = JSON.parse(item.answer)[0].topic;
							console.log(parsedAnswer, "88888888888888888888888888888888888888")
							// Ensure parsedAnswer is an array and that each item has a valid score property
							if (Array.isArray(parsedAnswer)) {
								// Calculate the total score, with a fallback of 0 if the score is invalid
								item.score = parsedAnswer.reduce((total, currentItem) => {
									// Ensure currentItem.score is a valid number
									const score = Number(currentItem.score); // Convert to number
									return total + (isNaN(score) ? 0 :
									score); // Only add valid numbers
								}, 0);
							} else {
								item.score = 0; // Set score to 0 if parsedAnswer is not an array
							}
						} catch (error) {
							// If JSON parsing fails, handle the error gracefully
							item.score = 0; // Default to 0 if parsing fails
						}

						return item;
					});

				}

			},
			itemClick(item, index) {
				this.isindex = index;
			},
			department(item, index, text) {

				if (text == "记录") {
					uni.navigateTo({
						url: '/outpatient/survey/index?id=' + item.questionnaireVo.id + "&name=" + item
							.questionnaireVo.title + "&photoUrl=" + item.questionnaireVo.photoUrl
					});
				} else {
					uni.navigateTo({
						url: '/outpatient/survey/index?id=' + item.id + "&name=" + item.title + "&photoUrl=" + item
							.photoUrl
					});
				}

			},
			goment(item, index) {
				uni.navigateTo({
					url: `/outpatient/details/index?id=${item.id}`
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
	.main-tit {
		background: #fff;
	}

	.box {
		background: #F5F3F0;
		padding: 24rpx;

		.scroll-Y {
			width: 100%;
			height: calc(100vh - 330rpx);
		}

		.box-left {

			border-radius: 16rpx;

			.left {
				border-radius: 8rpx;
				background: #fff;
				margin-bottom: 24rpx;
				padding: 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

			}

		}
	}

	.item-box {
		display: flex;
		justify-content: space-around;
		font-size: 32rpx;
		color: #000000;

		.title-item {
			width: 128rpx;
			text-align: center;
			padding: 24rpx 0;

		}

		.isindex {
			border-bottom: 4rpx solid #CCA566;
		}
	}

	.answer {
		// margin: 0 24rpx;
		margin-bottom: 24rpx;
		padding: 24rpx;

		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		.answer-top {
			display: flex;
			align-items: center;

			image {
				width: 72rpx;
				height: 72rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
			}

			text {
				margin-left: 16rpx;
				font-weight: bold;
				font-size: 32rpx;
			}

		}

		.answer-con {
			display: flex;
			flex-direction: column;
			padding: 24rpx;
			margin: 24rpx 0;
			background: rgba(204, 165, 102, 0.1);
			border-radius: 8rpx 8rpx 8rpx 8rpx;

			view:first-child {
				font-weight: bold;
				margin-bottom: 10rpx;
			}

			view:last-child {
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #808080;
			}
		}

		.answer-bot {
			display: flex;
			justify-content: flex-end;

			view {
				font-size: 24rpx;
				width: 144rpx;
				height: 56rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 1rpx solid #E6E6E6;
				text-align: center;
				line-height: 56rpx;
			}

			view:last-child {
				margin-left: 16rpx;
				color: #CCA566;
				border: 1rpx solid #CCA566;
			}
		}
	}
</style>